<template>
  <div id="app">
    <h2>条件判断指令</h2>
    <!--
      ● 实现原理不同：
        ○ v-if 指令会动态地创建或移除 DOM 元素；
        ○ v-show 指令会动态为元素添加或移除 style="display: none;" 样式，从而控制元素的显示与隐藏；
      ● 性能消耗不同：
        ○ v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此：
        ○ 如果需要非常频繁地切换，则使用 v-show 较好
        ○ 如果在运行时条件很少改变，则使用 v-if 较好
        ○ 另外，如果涉及到多条件判断，则只能使用 v-if、v-else-if、v-else 了
      -->
      <p v-show="exist">你看我在吗？</p>
      <p v-if="exist">你看我在吗？这次用 v-if 控制</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      exist: true
    }
  }
}
</script>

<style>
  h2 {
    color: sandybrown;
  }
</style>